<template>
  <div class="home">
    <router-view class="container"></router-view>
    <my-tab :tabs="tabs" class="tabs"></my-tab>
  </div>
</template>

<script>
import MyTab from '@/components/MyTab/MyTab'
export default {
  name: 'Home',
  components: {
    MyTab
  },
  data() {
    return {
      tabs: [
        {
          name: '首页',
          url: '/index'
        },
        {
          name: '分类',
          url: '/type'
        },
        {
          name: '购物车',
          url: '/cart'
        },
        {
          name: '个人',
          url: '/profile'
        }
      ]
    }
  },
}
</script>
<style lang="scss" scoped>
  .tabs {
    height: 1.2rem;
    border-top: 1px solid #eee;
  }
  .container {
    width: 100%;
    // calc css的计算属性可以进行加减乘除运算
    height: calc(100% - 1.2rem);
    overflow: auto;
  }
</style>
